<template>
  <div class="container">
    <div class="analyze-main-content">
      <div class="ll-main-content-title">
        <div class="title-left">
          <img class="hengban-icon" src="../../../assets/imgs/analyze-hengban-icon.png" alt="">
          <span class="omit-text">横板走势</span>
        </div>
        <div class="title-right">
          <span class="query-area-input-outbox">统计
            <input v-model="queryNum" type="text" placeholder="30" class="query-area-input my_text_center">&nbsp;期</span>
          <button class="query-area-btn" @click="llQueryData">查询</button>
        </div>
      </div>
      <div class="hengban-table-area-table">
        <div class="table-tabs-outerbox" v-if="this.$store.state.lotteryType != 'l28' && this.$store.state.lotteryType != 'k3'">
          <span :class="{active:item.status}" class="table-tabs-item my_text_center" @click="changeHengBanBallTabs(index)" v-for="(item,index) in hengbanTotalData" :key="index">{{item.title}}</span>
        </div>
        <p class="my_text_center charts-title" v-show="isShowChartsTitle">总和走势图</p>
        <div id="myChart" :style="{width:'1100px',height:'400px'}"></div>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");

export default {
  data() {
    return {
      queryNum: 30,
      chartXData: [],
      chartYData: [],
      hengbanTotalData: [],
      isShowChartsTitle:false
    };
  },
  mounted() {
    this.axios
      .get("analyse/getObtainHorizontalTrendLimit", {
        params: { lottery_id: this.$route.params.caizhongID }
      })
      .then(res => {
        if(this.$store.state.lotteryType == 'l28' || this.$store.state.lotteryType == 'k3' ){
          this.isShowChartsTitle = true;
            if (res.data.status) {
              this.hengbanTotalData = res.data.data;
              this.hengbanTotalData.forEach(el => {
                this.chartXData.push(el.periods);
                this.chartYData.push(el.number);
              });
              this.drawLine();
            } else {
              this.log(res.data.message);
            }
          }else{
            this.isShowChartsTitle = false;
            if (res.data.status) {
              this.hengbanTotalData = res.data.data;
              this.hengbanTotalData[0].data.forEach(el => {
                this.chartXData.push(el.periods);
                this.chartYData.push(el.number);
              });
              this.drawLine();
            } else {
              this.log(res.data.message);
            }
          }
        })
      .catch(err => {
        this.log(err);
      });
  },
  methods: {
    llQueryData() {
      if(this.queryNum>200){
        this.queryNum = 200;
      }
      this.axios
        .get("analyse/getObtainHorizontalTrendLimit", {
          params: {
            lottery_id: this.$route.params.caizhongID,
            limit: this.queryNum
          }
        })
        .then(res => {
          this.isShowChartsTitle = true;
          if(this.$store.state.lotteryType == 'l28' || this.$store.state.lotteryType == 'k3' ){
            if (res.data.status) {
              this.hengbanTotalData = res.data.data;
              this.chartXData = [];
              this.chartYData = [];
              this.hengbanTotalData.forEach(el => {
                this.chartXData.push(el.periods);
                this.chartYData.push(el.number);
              });
              this.drawLine();
            } else {
              this.log(res.data.message);
            }
          }else{
            this.isShowChartsTitle = false;
            if (res.data.status) {
              this.hengbanTotalData = res.data.data;
              this.chartXData = [];
              this.chartYData = [];
              this.hengbanTotalData[0].data.forEach(el => {
                this.chartXData.push(el.periods);
                this.chartYData.push(el.number);
              });
              this.drawLine();
            } else {
              this.log(res.data.message);
            }
          }
        })
        .catch(err => {
          this.log(err);
        });
    },
    drawLine() {
      let chartsContainer = document.getElementById("myChart");
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(chartsContainer);
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          name: "期号",
          nameLocation: "middle",
          nameGap: "40",
          data: this.chartXData,
          axisLabel: {
            textStyle: {
              color: "#686868",
              fontSize: "11"
            },
            rotate: -45
          }
        },
        yAxis: {
          type: "value",
          name: "号\n码",
          nameLocation: "middle",
          nameGap: "40",
          nameRotate: 0,
          axisLabel: {
            interval: 0
          },
          axisLabel: {
            textStyle: {
              color: "#686868",
              fontSize: "11"
            }
          },
          min: 0,
          // max: 10,
          splitNumber: 10
        },
        series: [
          {
            data: this.chartYData,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3A83D9",
                lineStyle: {
                  color: "#3A83D9"
                }
              }
            },
            label: {
              show: true
            },
            // formatter: '{b}: {c}'
            tooltip: {
              formatter: "{b}期 : {c}"
            }
          }
        ],
        tooltip: {
          // show:true,
        }
      });
    },
    // drawLinePc() {
    //   let chartsContainer = document.getElementById("myChart");
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = echarts.init(chartsContainer);
    //   // 绘制图表
    //   myChart.setOption({
    //     xAxis: {
    //       type: "category",
    //       name: "期号",
    //       nameLocation: "middle",
    //       nameGap: "40",
    //       data: this.chartXData,
    //       axisLabel: {
    //         textStyle: {
    //           color: "#686868",
    //           fontSize: "11"
    //         },
    //         rotate: -45
    //       }
    //     },
    //     yAxis: {
    //       type: "value",
    //       name: "号\n码",
    //       nameLocation: "middle",
    //       nameGap: "40",
    //       nameRotate: 0,
    //       axisLabel: {
    //         interval: 0
    //       },
    //       axisLabel: {
    //         textStyle: {
    //           color: "#686868",
    //           fontSize: "11"
    //         }
    //       },
    //       min: 0,
    //       max: 30,
    //       splitNumber: 10
    //     },
    //     series: [
    //       {
    //         data: this.chartYData,
    //         type: "line",
    //         itemStyle: {
    //           normal: {
    //             color: "#3A83D9",
    //             lineStyle: {
    //               color: "#3A83D9"
    //             }
    //           }
    //         },
    //         label: {
    //           show: true
    //         },
    //         // formatter: '{b}: {c}'
    //         tooltip: {
    //           formatter: "{b}期 : {c}"
    //         }
    //       }
    //     ],
    //     tooltip: {
    //       // show:true,
    //     }
    //   });
    // },
    //切换球号
    changeHengBanBallTabs(index) {
      this.hengbanTotalData.forEach((el, i) => {
        if (i == index) {
          el.status = 1;
          this.chartXData = [];
          this.chartYData = [];
          this.hengbanTotalData[index].data.forEach(el => {
            this.chartXData.push(el.periods);
            this.chartYData.push(el.number);
          });
          this.drawLine();
        } else {
          el.status = 0;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../../../assets/css/analyzehengban.less);
</style>


